<template>

    <RouterLink to="InvestAdd" style="margin-right: 10px;" >添加投资</RouterLink>
    <RouterLink to="AddFinan" style="margin-right: 10px;" >添加理财</RouterLink>
    <RouterLink to="ShowFinan" style="margin-right: 10px;" >显示理财</RouterLink>
    <RouterLink to="AddBorrow" style="margin-right: 10px;" >添加借款</RouterLink>
    <RouterLink to="ShowBorrow" style="margin-right: 10px;" >显示借款</RouterLink>

    <h1>投资项目信息展示页面</h1>

    投资项目名称:<input type="text" placeholder="请输入投资项目名称" v-model="FName" >
    最低投资金额:<input type="text" placeholder="请输入最低投资金额" v-model="MinMoney" >
    最高投资金额:<input type="text" placeholder="请输入最高投资金额" v-model="MaxMoney">

    <input type="button" value="查询" @click="ShowInvest()" />

    <table class="table table-bordered" border="1">
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资总额度</th>
                <th>已投资金额</th>
                <th>剩余金额</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Invest" >
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Residue }}</td>
                <td>{{ item.I_Number }}</td>
                <td>
                    <input type="button" value="删除" @click="DelData(item.I_Id)" />&nbsp;&nbsp;
                    <input type="button" value="修改" @click="Edit(item.I_Id)" />&nbsp;&nbsp;
                </td>
            </tr>
        </tbody>

    </table>

    共有{{ Page.listCount }}条数据，每页显示{{ Page.PageSize }}条，共{{ Page.PageIndex }}/{{ Page.PCount }}页
    <a href="#" @click="Size(1)">首页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(Page.PageIndex-1)">上一页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(Page.PageIndex+1)">下一页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(Page.PCount)">尾页</a>&nbsp;&nbsp;

    <select v-model="Csize"  @change="GuanSize()">
        <option value="1" >每页显示1条</option>
        <option value="2" >每页显示2条</option>
        <option value="3" >每页显示3条</option>
    </select>

    <input type="text" v-model="Tindex" style="width: 40px;" >
    <input type="button" value="跳转" @click="TakeShowInfo" />

</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();


//用于显示的响应式数据
const Invest = ref([{
    I_Id:'',
    I_Name:'',
    I_Budget:'',
    I_Receive:'',
    I_Residue:'',
    I_Number:''
}])
//用于查询的响应式数据
const FName = ref('');
const MinMoney = ref('');
const MaxMoney = ref('');

//用于分页的响应式数据
const Page = ref({
    PageIndex:1,//当前页
    PageSize:1,//每页显示数据条数
    listCount:0,//总条数
    PCount:0//总页数
})

//改变页容量的参数
const Csize = ref(1);
const Tindex = ref('');

//生命周期钩子函数
onMounted(()=>{
    ShowInvest();
})

//显示 查询 方法
const ShowInvest =()=>{
    axios({
        method:'get',
        url:'http://localhost:56707/api/Invest/ShowInvestInfo',
        params:{
            FName:FName.value,
            MinMoney:MinMoney.value,
            MaxMoney:MaxMoney.value,
            PageIndex:Page.value.PageIndex,
            PageSize:Page.value.PageSize
        }
    })
    .then(function(res){
        console.log(res.data);
        Invest.value = res.data.list;
        Page.value.listCount = res.data.listCount;
        Page.value.PCount = res.data.PCount;
    })
    .catch(function(err){
        console.log(err);
    })
}

//翻页方法
const Size = (i:number)=>{
    if(i>=1 && i<=Page.value.PCount){
        Page.value.PageIndex = i;
        ShowInvest();
    }
    else{
        alert('页码有误!');
        return;
    }
}

//改变页容量
const GuanSize = ()=>{
    Page.value.PageSize = Csize.value 
    ShowInvest();
}

//跳转页方法
const TakeShowInfo = () =>{
    const index = Tindex.value;
    if(index==""){
        alert('跳转页码不能为空!');
        return;
    }
    
    if(isNaN (Number(index) ) ){
        alert('跳转页码必须是数字!');
        Tindex.value = '';
        return;
    }
    
    if(Number(index)<1){
        alert('跳转页码最小值为1');
        Tindex.value = '';
        return;
    }

    if(Number(index) >Page.value.PCount){
        alert('跳转页码不得超过最大页码');
        Tindex.value = '';
        return;
    }

    Page.value.PageIndex = Number(index);
    ShowInvest();
}

//删除方法
const DelData =(Id:string)=>{
    if(confirm('确认要删除吗？')){
        axios({
            method:'get',
            url:'http://localhost:56707/api/Invest/DelData',
            params:{
                Id:Id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                ShowInvest();
            }
            else if(res.data==-1){
                alert("当前投资项目,有人投资,无法删除");
                ShowInvest();
            }
            else {
                alert("删除失败");
                ShowInvest();
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

//跳转修改页面
const Edit = (Id:string)=>{
    router.push({
        name:'InvestEdit',
        params:{
            Id:Id
        }
    })
}

</script>
